<template>
	<div id="orderDetail">
		<!-- yours conents -->
		<!--<haders title="订单详情"></haders>-->
		<scroller ref="scroller">
			<div class="main_user">
				<div class="banner">
					<p v-if="items.OrderStatus==2">
						<span>待拼单</span>
						<span  class="load_spanP"><font>差{{items.RestCount}}人成团  </font>
							<font v-if="!items.texts"><i class="loading"></i></font>
							<font v-else>剩余 {{items.texts}}</font>
						</span>
					</p>
					<p v-else-if="items.OrderStatus==1">
						<span>待付款</span>
					</p>
					<p v-else-if="items.OrderStatus==3">
						<span>待发货</span>
					</p>
					<p v-else-if="items.OrderStatus==4">
						<span>待收货</span>
					</p>
					<p v-else-if="items.OrderStatus==5">
						<span>待评价</span>
					</p>
					<p v-else-if="items.OrderStatus==6">
						<span>订单已评价</span>
					</p>
					<p v-else-if="items.OrderStatus==100">
						<span>交易完成</span>
					</p>
					<p v-else-if="items.OrderStatus==101">
						<span>订单已关闭</span>
					</p>
					<p v-else-if="items.OrderStatus==102">
						<span>订单已取消</span>
					</p>
				</div>
				<div class="addres">
					<p><span>{{items.ReceiptName}}</span><span>{{items.Phone}}</span></p>
					<p>地址：<span>{{items.ReceiptAddress}}</span></p>
				</div>
				<div class="orders">
					<p class="shopname">
						<span>{{items.ShopName}}</span>
						<span v-if="items.OrderStatus==2">待拼单</span>
						<span v-else-if="items.OrderStatus==1">待付款</span>
						<span v-else-if="items.OrderStatus==3">待发货</span>
						<span v-else-if="items.OrderStatus==4">待收货</span>
						<span v-else-if="items.OrderStatus==5">待评价</span>
						<span v-else-if="items.OrderStatus==6">订单已评价</span>
						<span v-else-if="items.OrderStatus==100">交易完成</span>
						<span v-else-if="items.OrderStatus==101">订单已关闭</span>
						<span v-else-if="items.OrderStatus==102">订单已取消</span> 
					</p>
					<div class="goods">
						<i>
						<img  :src="items.GoodsImg" alt="加载失败" :onerror="imgError"/>
					</i>
						<ul>
							<li><span>{{items.GoodsName}}</span><span>￥{{items.CloudPrice}}</span></li>
							<li><span></span><span>×{{items.GoodsCount}}</span></li>
						</ul>
					</div>
					<p class="shopcont"><span>共<font>{{items.GoodsCount}}</font>样商品</span><span>总计:<font>￥{{items.TotalMoney}}</font></span>
						(<font v-if="items.DeliveryType==1">自提</font>
						<font v-else>快递</font>
						<font v-text="items.FreightPrice>0?'运费:￥'+items.FreightPrice:'包邮'"></font>)</p>
					<p class="shopipone">
						<i class="cantuan">
							<img v-for="(imgs,index) in items.UserHeadUrl" v-if="index<8"  alt="加载失败" :onerror="imgError" :src="imgs"  :style="{'z-index':index}">
						</i>
						<span class="Count" v-if="items.OrderStatus==2">拼团进度{{items.ActorCount}}/{{items.CloudCount}}</span>
						<span class="Count" v-if="2<items.OrderStatus&&items.OrderStatus<=100">拼团成功</span>
						<span class="Count" v-else-if="items.OrderStatus>100">拼团失败</span>
						
						<!--<a href="tel:123123123131">联系卖家</a>-->
					</p>
				</div>
				<div class="orderData">
					<ul>
						<li><span>订单号:</span>
							<a>{{items.OrderNo}}</a>
						</li>
						<li><span>下单时间:</span>
							<a>{{items.CTime | tiems}}</a>
						</li>
						<li><span>订单金额:</span>
							<a>￥{{items.TotalMoney}}</a>
						</li>
						<li><span>订单状态:</span>
							<a v-if="items.OrderStatus==2">待拼单</a>
							<a v-else-if="items.OrderStatus==1">待付款</a>
							<a v-else-if="items.OrderStatus==3">待发货</a>
							<a v-else-if="items.OrderStatus==4">待收货</a>
							<a v-else-if="items.OrderStatus==5">待评价</a>
							<a v-else-if="items.OrderStatus==6">订单已评价</a>
							<a v-else-if="items.OrderStatus==100">交易完成</a>
							<a v-else-if="items.OrderStatus==101">订单已关闭</a>
							<a v-else-if="items.OrderStatus==102">订单已取消</a>
						</li>
						<li v-if="items.OrderStatus==4">
							<span>物流:</span>
							<a>￥{{items.LogisticsName}}</a>
						</li>
						<li v-if="items.OrderStatus==4">
							<span>物流单号:</span>
							<a>￥{{items.LogisticsNo}}</a>
						</li>
					</ul>
				</div>
			</div>
		</scroller>

		<footer>
			<div class="typeOne" v-if="items.OrderStatus==2">
				<a @click="streGoods(items)">拼团分享</a>
			</div>
			<div class="typeTwe" v-else-if="items.OrderStatus==1">
				<p><span>共<font>{{items.GoodsCount}}</font>件商品</span> <span>合计<font>￥{{items.TotalMoney}}</font></span></p>
				<a @click="payNew(items)">结算</a>
			</div>
			<div class="typeOne" v-else-if="items.OrderStatus==3">
				<!--<a>拼团分享</a>-->
			</div>
			<div class="typeThree" v-else-if="items.OrderStatus==4">
				<a>拼团分享</a>
				<a  @click="ReceiptGoods(items)">确认收货</a>
			</div>
			<div class="typeThree" v-else-if="items.OrderStatus==5">
				<a>拼团分享</a>
				<a>评价</a>
			</div>
			<div class="typeOne" v-else-if="items.OrderStatus==6">
				<!--<a>拼团分享</a> -->
			</div>
			<div class="typeOne" v-else-if="items.OrderStatus==100">
				<!--<a>拼团分享</a> -->
			</div>
			<div class="typeOne" v-else-if="items.OrderStatus==101">
				<!--<a>拼团分享</a> -->
			</div>
			<div class="typeOne" v-else-if="items.OrderStatus==102">
				<!--<a>拼团分享</a> -->
			</div>
		</footer>

	</div>
</template>
<script>
	import { Toast } from 'mint-ui';
	import { Indicator } from 'mint-ui';
	import { countdowm } from '@/js/public.js';
	import { MessageBox } from 'mint-ui';
	import Qs from 'qs';
	export default {
		name: 'orderDetail',
		components: {},
		data() {
			return {
				orderID:'',//订单号
				type: 1,
				items:[],//数据 
			}
		},
		created() {
			this.imgError = this.$store.state.imgError;
		},
		mounted() {
			this.orderID = this.$route.params.orderID;
			this.getOrderDetail();
		},
		methods: {
			getOrderDetail(){
				Indicator.open({text: '加载中...'});
				let _this=this; 
				_this.$http.get("/GroupBuy/GetOrderDetail",{
					params:{
						orderId:_this.orderID
					}
				}).then((res) => {
					console.log(res.data.data);  
					if(res.data.code==1){
						//时间戳计算
						countdowm(res.data.data.RestTime,function(text){
							_this.$set(res.data.data,'texts',text);
						})
						_this.items=res.data.data;
					
					}else{ 
						Toast(res.data.msg);
					}
					Indicator.close();
				}).catch((err) => {
					console.log(err);
				});
			}, 
			//立即支付
			payNew(item){ 
				 Indicator.open({text: '提交订单中...'});
				this.$http.post('/GroupBuy/PayOrder', Qs.stringify({
					"orderId": item.Id
				})).then((res) => {
					if(res.data.code == 1) {
						window.location.href=res.data.data; 
					} else {
						Indicator.close();
						Toast(res.data.msg);
					}
				}).catch((err) => {
					console.log(err);
				});	
			},
			//确认收货
			ReceiptGoods(item){
				MessageBox.confirm('确定收货?').then(action => {
					this.$http.post('/GroupBuy/ReceiptGoods', Qs.stringify({
						"orderId": item.Id
					})).then((res) => {
						if(res.data.code == 1) {
							this.getOrderDetail();//刷新请求
						} else {  
							Toast(res.data.msg);
						} 
					}).catch((err) => {
						console.log(err);
					}); 
				});  
			},
			//分享商品
			streGoods(item){
				this.$router.push({path:'/clientele/streaGoods/'+item.Id+'/'+0}) 
			}
		},
		filters:{
			tiems:function(val){
				if(!val){
					return ''
				}else{
					 return val.replace(/(T|\.\d+)/gim, " ");
				}
			},
			money:function(val) { 
				if(!val) {
					val = 0.00;
				} else {
					val = Number(val).toFixed(2);
				} 
				return val
			}
		}
	}
</script>
<style scoped>
	.Count{
		color: #666666;
	}
	.cantuan{
		display: block;
		position: relative;
		text-align: center;
	}
	.cantuan img{
		width:0.8rem;
		height:0.8rem;
		border-radius:100%;
		margin-left: -0.2rem;
	} 
	.main_user {
		/*padding-top: 1.333333rem;*/
		padding-bottom: 1rem;
	}
	
	.banner {
		width: 100%;
		background: #fff url(../../../assets/clientele/homepage/timg.jpg) no-repeat center;
		height: 3rem;
		background-size: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.banner p {
		text-align: center;
	}
	
	.banner p span { 
		color: #666666;
	}
	
	.banner p span:nth-child(1) {
		font-weight: 700;
		font-size: 0.453333rem;
		color:#6530E0;
	}
	
	.banner p span:nth-child(2) {
		color: #DF4444;
		font-size: 0.373333rem; 
	}
	.banner p span font:nth-child(2) {
		margin-left: 0.3rem;
	}
	.addres {
		width: 100%;
		background-color: #fff;
	}
	
	.addres p {
		border-bottom: 1px solid #CCCCCC;
		font-size: 0.373333rem;
		color: #666666;
		padding: 0.2rem 0.3rem;
	}
	
	.addres p:first-child {
		display: flex;
		justify-content: space-between;
	}
	
	.addres p:last-child {
		border-bottom: none;
	}
	
	.orders {
		margin: 0.2rem 0;
		background-color: #fff;
	}
	
	.shopname {
		font-size: 0.373333rem;
		padding: 0.2rem 0.3rem;
		color:#6530E0;;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #CCCCCC;
	}
	.shopname span:nth-child(2){
		color: #6530E0;
	}
	.goods {
		width: 100%;
		display: flex;
		padding: 0.2rem 0.3rem;
		border-bottom: 1px solid #CCCCCC;
	}
	
	.goods i {
		width: 25%;
		height: 2rem;
		margin-right: 5%;
	}
	
	.goods i img {
		width: 100%;
		height: 100%;
	}
	
	.goods ul {
		display: flex;
		width: 70%;
		flex-direction: column;
		justify-content: space-around;
	}
	
	.goods ul li {
		width: 100%;
		display: flex;
		justify-content: space-between;
		font-size: 0.346666rem;
		color: #666666;
	}
	
	.shopcont {
		padding: 0.2rem 0.3rem;
		text-align: right;
		font-size: 0.373333rem;
		color: #666666;
		border-bottom: 1px solid #ccc;
	}
	
	.shopcont font {
		color: #DF4444;
	}
	
	.shopipone {
		padding: 0.2rem 0.3rem;
		text-align: center;
	}
	
	.shopipone a {
		display: block;
		color: #fff;
		background-color: #71B5F4;
		border-radius: 0.066666rem;
		height: 0.8rem;
		line-height: 0.8rem;
		font-size: 0.373333rem;
	}
	
	.orderData {
		width: 100%;
		padding: 0.2rem 0.3rem;
		background-color: #fff;
	}
	
	.orderData ul li {
		width: 100%;
		line-height: 0.7rem;
		font-size: 0.346666rem;
		color: #666666;
	}
	
	.orderData ul li a {
		font-size: 0.346666rem;
		color: #666666;
		margin-left: 0.2rem;
	}
	
	footer {
		position: absolute;
		bottom: 0;
		left: 0;
		text-align: center;
		height: 1rem;
		width: 100%;
	}
	
	.typeOne a {
		display: block;
		border-radius: 0.066666rem;
		line-height: 1rem;
		color: #fff;
		font-size: 0.4rem;
		font-weight: 700;
		background-color: #6530E0;
	}
	
	.typeTwe {
		display: flex;
		line-height: 1rem;
	}
	
	.typeTwe p {
		width: 75%;
		display: flex;
		font-size: 0.373333rem;
		background-color: #fff;
		justify-content: space-around;
		border-top: 1px solid #CCCCCC;
	}
	
	.typeTwe p font {
		color: #DF4444;
	}
	
	.typeTwe a {
		width: 25%;
		display: inline-block;
		color: #fff;
		font-size: 0.4rem;
		font-weight: 700;
		background-color: #6530E0;
	}
	
	.typeThree {
		display: flex;
	}
	
	.typeThree a {
		width: 50%;
		display: inline-block;
		line-height: 1rem;
		color: #fff;
		background-color: #6530E0;
		border-radius: 0.066666rem;
		font-size: 0.4rem;
		font-weight: 700;
	}
	
	.typeThree a:first-child {
		background-color: #71B5F4;
	}
</style>